<div id="app">
  <!-- 登录类型切换按钮 -->
  <div class="tabs">
    <button @click="loginType = 'qq'">QQ登录</button>
    <button @click="loginType = 'phone'">手机登录</button>
    <button @click="loginType = 'email'">邮箱登录</button>
  </div>

  <!-- QQ登录表单 -->
  <div v-show="loginType === 'qq'" class="login-form">
    <h3>QQ登录</h3>
    <p>账号: <input type="text" v-model="qqAccount"></p>
    <p>密码: <input type="password" v-model="qqPassword"></p>
    <p><button>登录</button></p>
  </div>

  <!-- 手机登录表单 -->
  <div v-show="loginType === 'phone'" class="login-form">
    <h3>手机登录</h3>
    <p>手机号: <input type="text" v-model="phoneNumber"></p>
    <p>验证码: <input type="text" v-model="smsCode"></p>
    <p><button>登录</button></p>
  </div>

  <!-- 邮箱登录表单 -->
  <div v-show="loginType === 'email'" class="login-form">
    <h3>邮箱登录</h3>
    <p>邮箱: <input type="email" v-model="email"></p>
    <p>密码: <input type="password" v-model="emailPassword"></p>
    <p><button>登录</button></p>
  </div>
</div>

<style>
.tabs { margin: 10px 0; }
.tabs button { margin-right: 10px; padding: 5px 10px; }
.login-form { margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
.login-form p { margin: 10px 0; }
</style>

<script>
const app = Vue.createApp({
  data() {
    return {
      loginType: "qq", // 默认QQ登录
      // QQ登录相关字段
      qqAccount: "",
      qqPassword: "",
      // 手机登录相关字段
      phoneNumber: "",
      smsCode: "",
      // 邮箱登录相关字段
      email: "",
      emailPassword: ""
    };
  }
});
app.mount("#app");
</script>